<template>
    <div class="info-content">
        <el-form label-width="80px">
            <!-- <el-form-item label="奖品数量">
                <el-radio v-for="(item, index) in grid" :key="index" v-model="list.radio" :label="item.label" @change="prizeNum">{{ item.value }}</el-radio>
            </el-form-item> -->
            <el-form-item label="抽奖次数">
                <el-radio v-model="list.isTimes" label="a">展示</el-radio> <el-radio v-model="list.isTimes" label="b">不展示</el-radio>
            </el-form-item>
            <el-form-item label="中奖记录" class="record">
                <el-radio v-model="list.isRecord" label="record">展示</el-radio> <el-radio v-model="list.isRecord" label="noRecord">不展示</el-radio>
            </el-form-item>
            
            
            <div v-for="(item, index) in list.turnArr" :key="index" class="grad">
                <p>第{{ index + 1 }}格</p>
                <el-form-item label="是否中奖">
                    <el-radio v-model="item.isPrize" :label="true">中奖</el-radio> <el-radio v-model="item.isPrize" :label="false">未中奖</el-radio>
                </el-form-item>
                <el-form-item label="奖品类型" v-show="item.isPrize">
                    <el-radio v-model="item.prizeType" label="coupon">优惠券</el-radio> <el-radio v-model="item.prizeType" label="integral">积分</el-radio><el-radio v-model="item.prizeType" label="material">实物奖品</el-radio>
                </el-form-item>
                <el-form-item label="优惠券编码" v-show="item.isPrize" v-if="item.prizeType === 'coupon'" class="mg-b-20">
                    <el-input v-model="item.couponCode" placeholder="请输入优惠券编码"></el-input>
                </el-form-item>
                <el-form-item label="奖品名称" class="mg-b-20">
                    <el-input v-model="item.prizeName" placeholder="请输入奖品名称"></el-input>
                </el-form-item>
                <el-form-item label="奖品数量" class="mg-b-20">
                    <el-input v-model="item.prizeNum" placeholder="请输入奖品数量"></el-input>
                </el-form-item>

                <template v-if="list.data ">
                    <el-button 
                        type="primary" 
                        icon="el-icon-plus" 
                        @click="partAddImage(index)"
                        class="add-image add-prize-img"
                    >
                        添加奖品图片
                    </el-button>
                    <el-button 
                        type="primary" 
                        icon="el-icon-plus" 
                        @click="partAddImage(index, 'activeImg')"
                        class="add-image add-prize-img active-img"
                    >
                        添加中奖的图片
                    </el-button>
                </template>
                <el-upload
                    ref="upload"
                    :http-request="partUpload"
                    :show-file-list="false"
                    multiple
                    action
                    style="display:none"
                >
                </el-upload>
                <el-form-item label="白名单" v-show="item.isPrize" class="mg-b-20 white-list">
                    <el-input v-model="item.whiteList" type='textarea' placeholder="请输入奖品数量"></el-input>
                </el-form-item>
                
            </div>
        </el-form>
        <div class="senior">
            <p>高级设置</p>
            <template v-if="list.data " >
                <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    @click="addImage(null)"
                    class="add-image"
                >
                    版块背景图
                </el-button>
            </template>
            <el-upload
                ref="lastUpload"
                :http-request="upload"
                :show-file-list="false"
                multiple
                action
                style="display:none"
            >
            </el-upload>
        </div>
        
        
        
    </div>
</template>

<script>
export default {
    name: 'Grid',
    props: ['data', 'className'],
    data() {
        return {
            list: {
                radio: '4',
                isTimes: 'a',
                isRecord: 'record',
                turnArr: [
                ]
            },
            grid: [
                {
                    value: '4格',
                    label: '4'
                },
                {
                    value: '6格',
                    label: '6'
                },
                {
                    value: '8格',
                    label: '8'
                },
                {
                    value: '9格',
                    label: '9'
                }
            ],
            flagNum: null,
            activeImgFlag: ''
        }
    },
    mounted() {
        this.list = this.data
        this.$set(this.list,'radio', '4')
        this.$set(this.list,'isTimes', 'a')
        this.$set(this.list,'isRecord', 'record')
        this.$set(this.list, 'turnArr', defaultArr)
        this.$set(this.list, 'imgArr', [])
        
    },
    methods: {
        partAddImage(index, activeImgFlag) {
			this.imageIndex = index
			this.activeImgFlag = activeImgFlag
            console.log(this.$refs['upload'][0])
			this.$refs['upload'][0].$children[0].$refs.input.click()
        },
        partUpload(params) {
            
            const len = this.list.data.length;
            if (len >= this.len) {
                this.$message.error(`最多添加${this.len}张图片!`)
                return
            }
			const file = params.file,
			    fileType = file.type;
            const verifyList = [
                    {
                        text: "只能上传图片格式png、jpg、gif!",
                        result: fileType.indexOf('image') != -1
                    },
                    {
                        text: "只能上传大小小于5M",
                        result: file.size / 1024 / 1024 < 5
                    }
                ]

            for (let item of verifyList) {
                if (!item.result) {
                    this.$message.error(item.text)
                    return
                }
            }

			const form = new FormData();
			form.append("file", file);
			form.append("clientType", "multipart/form-data");

            const index = this.imageIndex
            const data = { 
                name: file.name, 
                url: URL.createObjectURL(file), 
                form
            }
            console.log(this.imageIndex, 'index')
            if (index !== null && !this.activeImgFlag) {
                this.$set(this.list.imgArr, index, data)
                this.$set(this.list.turnArr[index], 'imgsInfo', data)
            } else if (this.activeImgFlag == 'activeImg') {
                this.$set(this.list.turnArr[index], 'activeImgsInfo', data)
            } else {
                this.list.imgArr.push(data)
            }
		},
        addImage(index) {
			this.imageIndex = index
            console.log(this.$refs['upload'][0])
			// this.$refs['upload'][0].$children[0].$refs.input.click()
            this.$refs['lastUpload'].$children[0].$refs.input.click()
        },
        upload(params) {
            const len = this.list.data.length;
            if (len >= this.len) {
                this.$message.error(`最多添加${this.len}张图片!`)
                return
            }
			const file = params.file,
			    fileType = file.type;
            const verifyList = [
                    {
                        text: "只能上传图片格式png、jpg、gif!",
                        result: fileType.indexOf('image') != -1
                    },
                    {
                        text: "只能上传大小小于5M",
                        result: file.size / 1024 / 1024 < 5
                    }
                ]

            for (let item of verifyList) {
                if (!item.result) {
                    this.$message.error(item.text)
                    return
                }
            }

			const form = new FormData();
			form.append("file", file);
			form.append("clientType", "multipart/form-data")

            const index = this.imageIndex
            const data = { 
                name: file.name, 
                url: URL.createObjectURL(file), 
                form
            }
            
            if (index !== null) {
                this.$set(this.list.data, index, data)
            } else {
                this.list.data.push(data)
            }
		},
        prizeNum(val) {
            console.log(val)
            defaultArr = [];
            for (let i = 0; i < val; i ++) {
                defaultArr.push({
                    isPrize: true,
                    prizeType: 'coupon',
                    couponCode: '',
                    prizeName: '',
                    whiteList: '',
                    prizeNum: ''
                })
            }
            this.$set(this.list, 'turnArr', defaultArr)
        }
    }
}

    let defaultArr = []
    for (var i = 0; i < 8; i ++) {
      defaultArr.push({
            isPrize: true,
            prizeType: 'coupon',
            couponCode: '',
            prizeName: '',
            whiteList: '',
            prizeNum: '',
        })
    }
</script>

<style lang="scss" scoped>
.info-content{
    padding: 20px;
    overflow-y: scroll;
}
.el-form-item {
    ::v-deep .el-form-item__label {
        width: 90px !important;
    }
    ::v-deep .el-form-item__content {
        margin-left: 90px !important;
    }
}
.mg-b-20 {
    margin-bottom: 20px !important;
    ::v-deep .el-input {
        width: 80%;
    }
}
.grad {
    p {
        border-top: 1px dashed #ccc;
        padding-top: 20px;
    }
}
.senior {
    p {
        border-bottom: 1px dashed #ccc;
        padding: 10px;
    }
}
.add-prize-img {
    width: 90%;
    margin-bottom: 20px;
}
.info-content .active-img {
    margin-left: 0;
}
::v-deep .white-list .el-textarea__inner {
    width: 82%;
}


</style>